<template>
  <div class="search">
    <Header></Header>
    <section class="search-history">
      <div v-if="searchArr.length">
        <h2>
          <i class="iconfont icon-shijian"></i>
          <span>历史搜索</span>
          <span @click="deleteStory"> 清空历史记录 </span>
        </h2>
        <ul>
          <li v-for="(item, index) in searchArr" :key="index">{{ item }}</li>
        </ul>
      </div>
      <div v-else>暂无搜索记录</div>
      <div><h1>推荐商品</h1></div>
    </section>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/components/search/Header.vue";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "SearchIndex",
  components: {
    Tabbar,
    Header,
  },
  data() {
    return {
      searchArr: [],
    };
  },
  created() {
    this.searchArr = JSON.parse(localStorage.getItem("searchList")) || [];
    // console.log(this.searchArr);
  },
  methods: {
    deleteStory() {
      ElMessageBox.confirm("是否确认删除历史记录?", "Warning", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
      }).then((res) => {
        if (res === "confirm") {
          localStorage.removeItem("searchList");
          this.searchArr = [];
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section {
  flex: 1;
  background-color: #f5f5f5;
  overflow: hidden;
}
.search-history {
  padding: 0 8px;
  font-size: 18px;
  position: relative;
  h2 {
    font-weight: 400;
    font-size: 18px;

    i {
      padding: 0 5px 0 0;
      color: red;
      font-size: 18px;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 10px;
    li {
      padding: 3px 10px;
      border: 1px solid #ccc;
      margin: 10px;
      font-size: 17px;
    }
  }
}
.search-history h2 span:last-child {
  position: absolute;
  right: 20px;
}
</style>